<div class="row m-b20">
    <div class="col-xs-4" ng-if="::vm.indigoLabel" ng-bind="::vm.indigoLabel"></div>
    <div ng-class="{'col-xs-8 text-right': vm.indigoLabel, 'col-xs-12 text-right': !vm.indigoLabel}"
         ng-if="!vm.isHideColumnSettings">
        <div ng-if="vm.totalFilteredRowsLength.length < vm.indigoRows.length" class="search-info">
            <strong ng-bind="vm.totalFilteredRowsLength.length"></strong> of <span ng-bind="vm.indigoRows.length"></span> are shown
        </div>
        <div class="search-field">
            <span class="icon icon-search"></span>
            <input type="search"
                   class="uui-search"
                   placeholder="Search"
                   ng-change="vm.searchDebounce()"
                   ng-model="vm.searchText"
                   press-enter="$event.preventDefault()">
        </div>
        <columns-settings ng-if="::!vm.indigoHideColumnSettings"
                          visible-columns="vm.visibleColumns"
                          columns="vm.columns"
                          on-changed="vm.onChangedColumnSetting(column, isVisible)"
                          reset-columns="vm.resetColumns()">
        </columns-settings>
    </div>
</div>

<ng-transclude></ng-transclude>

<div class="table-responsive" indigo-scroller="x">
    <table class="table table-striped product">
        <thead>
        <tr>
            <th ng-repeat="column in vm.columns track by column.id" ng-show="vm.visibleColumns[column.id]"
                ng-switch="::!column.actions.length">
                <div class="btn-group btn-group-sm btn-group-justified product-header-item"
                     ng-switch-when="true">
                    <a class="btn btn-transparent" ng-disabled="vm.isReadonly" ng-bind="::column.name"></a>
                </div>
                <div class="btn-group btn-group-sm btn-group-justified product-header-item"
                     uib-dropdown
                     ng-switch-when="false">
                    <a class="btn btn-transparent"
                       uib-dropdown-toggle
                       ng-disabled="vm.isReadonly && !column.noDisableable">
                        <span ng-bind="column.name"></span><span class="caret"></span>
                    </a>
                    <ul uib-dropdown-menu class="no-draggable"
                        role="menu">
                        <li ng-repeat="action in column.actions track by $index" class="no-draggable">
                            <a ng-click="(vm.isReadonly && !column.noDisableable) || action.action(vm.indigoRows, column)"
                               class="no-draggable" ng-bind="::action.name"></a>
                        </li>
                    </ul>
                </div>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in vm.rowsForDisplay track by $id(row)"
            ng-class="{'success': vm.selectedBatch === row}">
            <td ng-repeat="column in vm.columns track by column.id"
                class="text-center"
                ng-click="vm.onRowSelect($event, row)"
                ng-show="vm.visibleColumns[column.id]"
                style="min-width: 150px">
                <cell-typer></cell-typer>
            </td>
        </tr>
        <tr ng-if="!vm.rowsForDisplay.length">
            <td colspan={{vm.columns.length}} class="text-muted text-center">
                <h3 class="m-50">empty</h3>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="row" ng-if="vm.pagination.pageSize < vm.totalFilteredRowsLength">
    <div class="col-xs-12 text-center">
        <div uib-pagination
             class="pagination-sm"
             total-items="vm.totalFilteredRowsLength"
             ng-change="vm.onPageChanged()"
             ng-model="vm.pagination.page"
             items-per-page="vm.pagination.pageSize"
             boundary-link-numbers="true"
             rotate="false">
        </div>
    </div>
</div>
